<template>
  <div class="comment-container">
    <!-- 顶部操作区 -->
    <div class="action-header">
      <a-button type="primary" @click="handleForm({productId: router.currentRoute.value.query.value})" v-auth="'jydq:productComment:edit'">
        <svg class="icon" viewBox="0 0 1024 1024" width="16" height="16">
          <path d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m256 549.888H549.888V768c0 20.48-16.384 36.864-36.864 36.864-20.48 0-36.864-16.384-36.864-36.864V549.888H256c-20.48 0-36.864-16.384-36.864-36.864 0-20.48 16.384-36.864 36.864-36.864h220.16V256c0-20.48 16.384-36.864 36.864-36.864 20.48 0 36.864 16.384 36.864 36.864v220.16H768c20.48 0 36.864 16.384 36.864 36.864 0 20.48-16.384 36.864-36.864 36.864z" fill="#ffffff"/>
        </svg>
        <span class="btn-text">新增评论</span>
      </a-button>
    </div>

    <!-- 评论列表区域 -->
    <div class="comment-list">
      <div class="comment-card" v-for="(item, index) in commentList" :key="index">
        <div class="comment-header">
          <div class="user-info">
            <svg class="avatar-icon" viewBox="0 0 1024 1024" width="32" height="32">
              <path d="M512 512c141.44 0 256-114.56 256-256S653.44 0 512 0 256 114.56 256 256s114.56 256 256 256z m0 85.333333C341.333333 597.333333 0 682.666667 0 853.333333v85.333334h1024v-85.333334c0-170.666667-341.333333-256-512-256z" fill="#8c8c8c"/>
            </svg>
            <span class="username">{{ item.createName }}</span>
          </div>
          <div class="rating">
            <span v-for="n in 5" :key="n" class="star" :class="{ active: n <= item.rating }">★</span>
          </div>
        </div>

        <div class="product-name">{{ item.productName }}</div>

        <div class="comment-content">{{ item.content }}</div>

        <div class="image-gallery">
          <div class="image-item" v-for="(image, imgIndex) in item.images.split(',')" :key="imgIndex">
            <img :src="'http://localhost:3100/js' + image" alt="评论图片" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <CommentForm @register="registerDrawer" />
</template>




<script lang="ts" setup name="ProductDetail">
  import { ref, onMounted } from 'vue';
  import {Layout, LayoutHeader, LayoutContent, LayoutFooter, Col, Card} from 'ant-design-vue';
  import Header from './components/Header.vue';
  import Footer from './components/Footer.vue';
  import Home from './Home.vue';
  import Shop from './Shop.vue';
  import {jydqProductListData} from "/@/api/jydq/jydqProduct";
  import { router } from "/@/router";
  import {jydqProductCommentListData} from "/@/api/jydq/jydqProductComment";
  import CommentForm from "/@/views/jydq/productComment/form.vue";
  import {useDrawer} from "/@/components/Drawer";

  const commentList = ref([]);
  const currentKey = ref('1');
  const selectKey = (key: string) => {
    currentKey.value = key;
  };
  const [registerDrawer, { openDrawer }] = useDrawer();

  function handleForm(record: Recordable) {
    console.log(router.currentRoute.value.query.value);
    openDrawer(true, record);
  }
  onMounted(async () => {
    const res = await jydqProductCommentListData({ productId: router.currentRoute.value.query.value });
    commentList.value = res.list;
  });
</script>

<style scoped lang="less">
  .comment-container {
    padding: 24px;
    background: #f5f5f5;
  }

  .action-header {
    margin-bottom: 24px;
  }

  .btn-text {
    margin-left: 8px;
  }

  .comment-list {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .comment-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .user-info {
    display: flex;
    align-items: center;
  }

  .username {
    margin-left: 12px;
    font-weight: 500;
    color: #262626;
  }

  .rating {
    color: #d9d9d9;
  }

  .star {
    margin-left: 2px;
    font-size: 16px;
  }

  .star.active {
    color: #fadb14;
  }

  .product-name {
    font-size: 16px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 12px;
  }

  .comment-content {
    color: #595959;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .image-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
  }

  .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .image-item img:hover {
    transform: scale(1.05);
  }

  .icon {
    vertical-align: -0.125em;
  }
</style>
